<template>
  <div>
    <div class="leftContent d-flex">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :wvalueth="480" :title="'数据管理'">
          <div class="mb-1">
            <p class="font-lan-gray-60">地图管理：</p>
            <el-row :gutter="16">
              <el-col :span="12">
                <coverage v-model="data.select" :placeholder="'图层管理'" :options="data.coverage" @change="slecetChange" />
              </el-col>
              <el-col :span="12">
                <maptype />
              </el-col>
            </el-row>
          </div>
          <div class="mb-1">
            <p class="font-lan-gray-60">数据来源：</p>
            <scCascader v-model="data.pullData" :placeholder="'数据管理'" :options="data.pullDatas" :label="'name'"
              :value="'id'" />
          </div>
          <div>
            <p class="font-lan-gray-60">数据范围：</p>
            <scCascader v-model="data.cascader" :placeholder="'地址管理'" :options="storage.state.area" :label="'name'"
              :value="'id'" @change="acscaderChange" />
          </div>
        </box>
        <box class="mb-3" :wvalueth="480" :title="'水资源巡查管护统计'">
          <decorate1 class="mb-2">
            <div class="d-flex jc-between">
              <div class="d-flex ai-center">
                <img :src="waterArea" alt="">
                <span class="font-lan ml-3">灌区内水源面积：</span>
              </div>
              <div>
                <span class="font-num-l">{{}}</span>
                <span class="font-lan">亩</span>
              </div>
            </div>
          </decorate1>
          <decorate1>
            <div class="d-flex jc-between">
              <div class="d-flex ai-center">
                <img :src="waterUnit" alt="">
                <span class="font-lan ml-3">灌区内水源管护单位：</span>
              </div>
              <div>
                <span class="font-num-l">{{}}</span>
                <span class="font-lan">个</span>
              </div>
            </div>
          </decorate1>
        </box>
        <box :wvalueth="480" :title="'灌区供水资源统计'">
          <div class="d-flex ai-center mb-2">
            <div class="echart mr-3">
            <pieB :data="{
              showTitle:false,
                color:data.farmlands.map((item)=>item.background),
                list:data.farmlands
              }"/>
            </div>
            <div class="flex-1">
              <div v-for="(item, index) in data.farmlands" :key="index" class="chartItem d-flex ai-center jc-between mb-2">
                <div>
                  <span class="chartIcon mr-2" :style="{ background: item.background }"></span>
                  <span class="font-lan">{{ item.name }}</span>
                </div>
                <div class="font-lan">{{ item.value }}%</div>
              </div>
            </div>
          </div>
          <lineB />
        </box>
      </el-scrollbar>
      <div class="icons ml-3">
        <div v-for="(item, index) in data.farmlands" :key="index" class="iconInfo d-flex ai-center">
          <div class="icon" :style="{backgroundColor:item.background}"></div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :width="480" :title="'水利监测系统统计'">
          <decorate2 class="mb-2" :title="'水利监测系统分布统计'" />
          <div class="d-flex ai-center mb-2">
            <div class="echart mr-3">
            <pieB :data="{
              showTitle:false,
                color:data.farmlands.map((item)=>item.background),
                list:data.farmlands
              }"/>
            </div>
            <div class="flex-1">
              <el-row :gutter="16">
                <el-col v-for="(item, index) in data.farmlands" :key="index" :span="12">
                  <div  class="chartItem d-flex ai-center jc-between mb-2">
                    <div>
                      <span class="chartIcon mr-2" :style="{ background: item.background }"></span>
                      <span class="font-lan">{{ item.name }}</span>
                    </div>
                    <div class="font-lan">{{ item.value }}%</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <decorate2 class="mb-2" :title="'水利监测系统状态统计'" />
          <el-scrollbar ref="scrollContainer" @wheel.prevent="handleScroll">
						<div class="d-flex mb-3 p-1">
							<div :class="['tag', 'mr-3', 'pointer', active == index ? 'active' : '']"
								v-for="(item, index) in data.tags" :key="index" @click="tagsChange(item, index)">
								<p :class="['font-lan', 'white-nowrap', active == index ? 'text-shadow' : 'font-lan-gray-60']">{{ item.name
								}}</p>
							</div>
						</div>
					</el-scrollbar>
          <div>
            <div v-for="(item, index) in data.types" :key="index" class="d-flex ai-center mb-1">
              <img class="mr-2" :src="item.img" alt="">
              <div class="flex-1 ">
                <div class="d-flex ai-center jc-between">
                  <div>
                    <span class="font-lan">{{item.name}}</span>
                    <span class="font-lan-gray-60">（{{ item.des }}）</span>
                  </div>
                  <div>
                    <span class="font-lan">{{item.count}}</span>
                    <span class="font-lan-gray-60-s">个</span>
                  </div>
                </div>
                <div>
                  <el-progress :class="[item.class]" :show-text="false"  :percentage="item.value"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </box>
        <box :width="480" :title="'在线告警'" class="mb-4">
          <el-scrollbar :max-height="330">
            <div v-for="(item, index) in data.warning" :key="index" class="d-flex ai-center mb-2">
              <img :src="item.img" alt="" class="warningImg mr-2">
              <div>
                <div class="d-flex ai-center jc-between mb-2">
                  <p class="font-lan-m">{{item.name}}</p>
                  <p class="font-lan-gray-60-m">{{item.time}}</p>
                </div>
                <div class="warningContent">{{item.content}}</div>
              </div>
            </div>
          </el-scrollbar>
        </box>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import pieB from "@/chart/pieChart/pic-bole";
import lineB from "@/chart/lineChart/line-bole-1";
import { getCropColor, calculateCenter } from "@/utils/common";
import mapControler from "@/components/mapContainer/mapControler";
import storage from '@/store'
import { useRouter } from 'vue-router';
import {
  agriculturalStatistics,
  plantStatistics,
  cropDetails
} from "@/public/request/http";
import moment from "moment";

export default defineComponent({
  components: {
    pieB,
    lineB,
  },
  setup() {
    //变量
    // const maxHeight = ref(window.innerHeight-160+'px')
    const maxHeight = computed(() => window.innerHeight - 160 + 'px')
    const lngDiff = 0.031185
    const latDiff = 0.022595
    const router = useRouter()
    const data: any = reactive({
      coverage: [],
      select: null,
      pullDatas: [],
      pullData: [],
      cascader: [],
      adress: [],
      farmlands: [],
      warning: [],
      tags:[{name:'有机质',value:0},{name:'可溶性盐',value:0},{name:'酸碱度',value:0},{name:'有效磷',value:0},{name:'全效钾',value:0},],
      types: [
        { type: '0', value: '60', count: 780 },
        { type: '1', value: '20', count: 310 },
        { type: '2', value: '20', count: 100 }],
    });
    const tableData = ref([]);
    const searchData: any = reactive({
      personConfirmation: null,
      district: [],
      option1: 1,
      option2: 1,
    });
    const waterUnit = require("@/assets/img/waterUnit.png");
    const waterArea = require("@/assets/img/waterArea.png");
    const soillocation = require("@/assets/img/soillocation.png")
    const active = ref(0)
    const scrollWrapper = computed(() => {
			return scrollContainer.value.wrapRef ? scrollContainer.value.wrapRef : scrollContainer.value.wrap$;
		});
		const scrollContainer = ref();
    // 生命周期
    onMounted(async () => {
      //
      data.types.forEach(item=>{
        let obj = getDetailByType(item.type)
        item.des = obj.des
        item.name = obj.name
        item.class = obj.class
        item.img = obj.img
      })
      data.pullDatas = [storage.state.dataSources[router.currentRoute.value.meta.index.toString()]]
      mapControler.mapReSet();
      getAgriculturalStatistics()
      getPlantStatistics()
      getCropDetails()
    });

    onUnmounted(() => {
      //
      mapControler.mapReSet();
      
    });

    //methods

    const getAgriculturalStatistics = async () => {
      try {
        let res = await agriculturalStatistics();

      } catch (error) {
        return
      }
    };

    const getPlantStatistics = async () => {
      try {
        let res = await plantStatistics();
        data.farmlands = res.map(item=>{
          return {
            name:getCropColor(item.type).name,
            background:getCropColor(item.type).color,
            value:parseFloat(item.ratio)*100,
            count:item.sumArea
          }
        })
      } catch (error) {
        return
      }
    };

    const getCropDetails = async () => {
      try {
        let res = await cropDetails();
        res.forEach((item) => {
          item.cropType = item.type
          item.type = "作物分布"
          item.pointList = JSON.parse(item.points).map(item1=>{return {lng:item1.lon,lat:item1.lat}})
          item.cropName = getCropColor(item.cropType).name
          item.fillColor = getCropColor(item.cropType).color
          item.fillOpacity = 0.6
          mapControler.drawArea(item);
        });
      } catch (error) {
        return
      }
    };

    const tagsChange = (item,index)=>{
      active.value = index
    }

    const slecetChange = (e) => {
      console.log(e);

    }

    const acscaderChange = (e) => {
      console.log(data.cascader);
    }

    const handleScroll = (e: any) => {
			const eventDelta = e.wheelDelta || -e.deltaY * 20;
			const $scrollWrapper = scrollWrapper.value;
			$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft - eventDelta / 2;
		};

    const getDetailByType = (val)=> {
      let obj = {
        name: '',
        des: '',
        class:'',
        img:null
      }
      switch (val) {
        case '0':
          obj.name = '正常';
          obj.des = '1.0~1.5';
          obj.class = 'el-bg-inner-normal';
          obj.img = require("@/assets/img/decorate_n.png")
          break;
        case '1':
          obj.name = '过高';
          obj.des = '1.2~2.0';
          obj.class = 'el-bg-inner-high';
          obj.img = require("@/assets/img/decorate_h.png")
          break;
        case '2':
        obj.name = '过低';
          obj.des = '0.1~1.0';
          obj.class = 'el-bg-inner-low';
          obj.img = require("@/assets/img/decorate_l.png")
          break;
        default:
          obj.name = '其他';
          obj.des = '0.1~2.0';
          obj.class = '';
          obj.img = require("@/assets/img/decorate2.png");
          break;
      }
      return obj
    }


    // return
    return {
      data,
      waterArea,
      waterUnit,
      tableData,
      searchData,
      slecetChange,
      acscaderChange,
      moment,
      maxHeight,
      moveTo,
      soillocation,
      active,
      tagsChange,
      storage,
      scrollContainer,
			handleScroll,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.chartItem {
  padding: 4px 8px;
  background: rgba(153, 207, 255, 0.08);

  .chartIcon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #93F5E1;
    border-radius: 2px 2px 2px 2px;
  }
}

  

.tag{
  padding: 0 10px;
  background: linear-gradient(90deg, rgba(82,147,204,0.3) 0%, #5293CC 47%, rgba(82,147,204,0.3) 100%);
  box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.16);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(153, 207, 255, 0), rgba(153, 207, 255, 0.3), rgba(153, 207, 255, 1), rgba(153, 207, 255, 0.3)) 1 1;
}
.active{
  position: relative;
  background: linear-gradient(351deg, #CCA352 0%, #F5D493 100%);
  border-radius: 2px 2px 2px 2px;
  border-image: linear-gradient(270deg, rgba(245, 212, 147, 1), rgba(255, 235, 153, 1)) 1 1;
}
.active::before{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  top: -4px;
  left: -4px;
  background: rgba(245,196,98,0.6);
}
.active::after{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: rgba(245,196,98,0.6);
}
.text-shadow{
  text-shadow: 0px 2px 4px rgba(0,0,0,0.16);
}

.warningImg{
  width: 48px;
  height: 48px;
}
.warningContent{
  font-size: 16px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: 500;
  color: #F5AB93;
  line-height: 24px;
}
</style>
